<template>
	<header>
		<div class="l-content">
			<el-button @click="handleMenu" plain icon="el-icon-menu" size="mini" ></el-button>
			<!-- <h3 style="color: #fff;">首页</h3> -->
			<!-- <el-breadcrumb separator="/">
			  <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
			</el-breadcrumb> -->
		</div>
		<div class="r-content">
			<el-dropdown trigger="click" size="mini" >
			  <span >
			    <img :src="userImg" class="user"  />
			  </span>
			  <el-dropdown-menu >
			    <el-dropdown-item>
					<el-button type="info"  @click="logout">退出</el-button>
				</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
			
		</div>
	</header>
	
	
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name : 'CommonHeader',
		data(){
			return{
				userImg:require('../assets/longmao.jpeg')
			}
		},
		methods:{
			handleMenu(){
				this.$emit('onMenu')
				// console.log(this.$store.state.tab.isCollapse)
				// this.$store.commit('collapseMenu')
			},
			logout(){
				window.sessionStorage.clear();
				this.$router.push('/login')	
			}
		},
		computed:{
			// ...mapState({
			// 	tags:state => state.tab.tabsList
			// })
		}
	}
</script>

<style lang="less" scoped>
	header{
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.l-content{
		display: flex;
		align-items: center;
		h3{
			margin-left: 20px;
		}
	}
	.r-content{
		.user{
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
</style>
